<template>
  <view class="container">
    <gather-detail-item v-if="isGather" :detail="detail" :hiddenResult="true" />
    <detail-item v-else :detail="detail" :hiddenResult="true" />

    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" labelWidth="120px" labelPosition="top">
        <uni-forms-item name="handlerResult" label="处理记录">
          <textarea
            v-model="formData.handlerResult"
            class="text-area"
            placeholder-class="form-placeholder__style"
            maxlength="100"
          />
        </uni-forms-item>

        <view class="submit-group">
          <button class="u-button block" :ripple="true" @click="submit">提交</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DetailItem from '@/pages/work/alarm-info/components/detailItem.vue'
import GatherDetailItem from '@/pages/work/alarm-info/components/gatherDetailItem.vue'
import {
  handleWarnEvent,
  reqAggregationEventAlarmDetail,
  reqAlarmInformationDetail,
  reqAlarmInformationHandle
} from '@/api/alarm-info'

export default {
  components: {
    CuCellGroup,
    CuCell,
    DetailItem,
    GatherDetailItem
  },
  data() {
    return {
      formData: {
        //隐患项
        handlerResult: ''
      },
      detail: {},
      isGather: false,
      id: '',
      rules: {
        handlerResult: {
          rules: [
            {
              required: true,
              errorMessage: '处理记录不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ id, name, isGather }) {
    this.isGather = isGather === 'true'
    this.id = id
    this.fetchDetail(name)
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    async fetchDetail(name) {
      if (this.isGather) {
        const event = await reqAggregationEventAlarmDetail(this.id)
        this.detail = event.data || {}
        this.detail.eventName = name
      } else {
        reqAlarmInformationDetail(this.id).then((res) => {
          this.detail = res.data || {}
        })
      }
    },
    navigateBack() {
      uni.navigateBack()
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        this.$modal.confirm('确定处理？').then(() => {
          const data = this.isGather
            ? { ...this.formData, id: this.id }
            : {
                handleResult: this.formData.handlerResult,
                ids: [this.id]
              }

          const fn = this.isGather ? handleWarnEvent : reqAlarmInformationHandle // 报警结果上报
          fn(data).then((res) => {
            // 调用正常接口
            this.checkNormal()
          })
        })
      })
    },
    checkNormal() {
      this.$modal.showToast('处理成功')
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:success', {})
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 20rpx;
}
.form-container {
  background-color: #fff;
  padding: 20rpx 30rpx 1rpx 30rpx;
}
</style>
